<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>Insert_Title_Here</title>
		<link rel="Shortcut Icon" href="Insert_Favicon_Here" />
		<link rel="stylesheet" href="public/bootstrap/css/bootstrap.min.css" />
		<script src="public/js/jquery-3.2.1.min.js"></script>
		<script src="public/bootstrap/js/bootstrap.min.js"></script>
		<link rel="stylesheet" href="public/css/style.css" />
		<script src="public/js/holder.min.js"></script>
	</head>
	<style>
		th, td{
			text-align: center;
		}
		#myTab li{
			width:160px;
			text-align: center;
		}
	</style>
	<script type="text/javascript">
		function downloadFile(fileId, upUser){
	        var url = "${pageContext.request.contextPath}/homeAsy?method=download";
	        var fileName = upUser+fileId;
	        var form = $("<form></form>").attr("action", url).attr("method", "post");
	        form.append($("<input></input>").attr("type", "hidden").attr("name", "fileId").attr("value", fileName));
	        form.appendTo('body').submit().remove();
		}
		window.onload=function(){
			var o= document.getElementById('to'+'${fileType}');
			o.className = o.className+" in active";
			var oo= document.getElementById('to'+'${fileType}'+'a').parentNode;
			oo.className = " active";
		}
		function searchFilesOfUper(uper){
			window.location.href="${pageContext.request.contextPath}/search?method=searchUper&upId=" + uper;
		}
		function deleteMsg(){
			document.getElementById("msg").remove();
		}
		function changePage(fileType, method){
			var url = "${pageContext.request.contextPath}/homeUI";
	        var form = $("<form></form>").attr("action", url).attr("method", "post");
	        form.append($("<input></input>").attr("type", "hidden").attr("name", "fileType").attr("value", fileType));
	        form.append($("<input></input>").attr("type", "hidden").attr("name", "method").attr("value", method));
	        form.appendTo('body').submit().remove();
		}
		function deleteUserMsg(userId, msg, obj){
			$.ajax({
				url:"${pageContext.request.contextPath}/msgAsy",
				async:true,
				type:"POST",
				data:{"userId":userId,"msg":msg },
				success:function(WebData){
					if(WebData.isSuc){
						obj.parentNode.parentNode.remove();
					}
				},
				error:function(){
					alert("请求失败");
				},
				dataType:"json"
			});
		}
		
	</script>
	<body>
		<!--顶部效果-->
		<%@ include file= "/WEB-INF/zpublicpages/header.jsp" %>
		
		<!--主体部分-->
		<div class="container" style="margin-top: 10px; font-size: 20px;">
			<c:if test="${!empty requestScope.notice}">
				<div id="msg" style="background-color: #C0C0C0; height: 60px; width: 100%; line-height: 60px; border-radius: 10px;margin-bottom: 10px; font-size:20px;">
					<div class="container">
						<div class="row">
							<div class="col-md-offset-1 col-md-1" style="text-align: right;">公告：</div>
							<div class="col-md-9" style="text-align: left;">${requestScope.notice}</div>
							<div class="col-md-1" style="text-align: left;">
								<button onclick = "deleteMsg()" 
									 style="border:0px;background-color:transparent;">
									<div class="glyphicon glyphicon-remove"></div>
								</button>
							</div>
						</div>
					</div>
				</div>
			</c:if>
			
			<div class="row">
				<ul id="myTab" class="nav nav-tabs">
					<li>
						<a href="#toLearn" data-toggle="tab" id="toLearna">学习资源</a>
					</li>
					<li>
						<a href="#toPlay" data-toggle="tab" id="toPlaya">影音娱乐</a>
					</li>
					<li>
						<a href="#toIde" data-toggle="tab" id="toIdea">开发工具</a>
					</li>
					<li>
						<a href="#toOffice" data-toggle="tab" id="toOfficea">政策文件</a>
					</li>
					<li>
						<a href="#msgs" data-toggle="tab" id="msgsa">留言板</a>
					</li>
					<form method="post" class="navbar-form navbar-right" role="search" action="${pageContext.request.contextPath}/search?method=search" target="_blank" href="www.baidu.com">
						<div class="form-group" style="margin-top:2px;">
							<input type="text" class="form-control" placeholder="Search" name = "search">
						</div>
						<button type="submit" class="btn btn-default">Submit</button>
					</form>
				</ul>
				<div id="myTabContent" class="tab-content" style="margin-top: 20px;line-height: 2;">
					<div class="tab-pane fade" id="toLearn">
						<table cellpadding="1px" style="margin: 0 auto;">
							<tr>
								<th style="width:600px;">文件名</th>
								<th style="width:250px;">上传者</th>
								<th style="width:150px;">大小</th>
								<th style="width:300px;">上传时间</th>
							</tr>
							<c:forEach items="${requestScope.learn.filesInfo}" var="file">
								<tr>
									<td>
										<button onclick="downloadFile('${file.fileId}', '${file.upUser}')"
											 style="border:0px;background-color:transparent;">
											${file.fileId}
										</button>
									</td>
									<td>
										<button onclick="searchFilesOfUper('${file.upUser}')"
											 style="border:0px;background-color:transparent;">
												${file.upUser}
										</button>
									</td>
									<td>${file.size}&nbsp;kb</td>
									<td>${file.upTime}</td>
								</tr>
							</c:forEach>
						</table>
						<center>
							<table>
								<tr>
									<td>
										<a href="javascript:;" onclick="changePage('learn','prior')">
											<div class="glyphicon glyphicon-backward" style="font-size:20px"></div>
										</a>
									</td>
									<td>
										&nbsp;第${learn.time + 1}页&nbsp;/&nbsp;共${learn.allPage}页&nbsp;
									</td>	
									<td>
										<a href="javascript:;" onclick="changePage('learn','next')">
											<div class="glyphicon glyphicon-forward" style="font-size:20px"></div>
										</a>
									</td>
								</tr>
							</table>
						</center>
					</div>
					<div class="tab-pane fade" id="toPlay">
						<table cellpadding="1px" style="margin: 0 auto;">
							<tr>
								<th style="width:600px;">文件名</th>
								<th style="width:250px;">上传者</th>
								<th style="width:150px;">大小</th>
								<th style="width:300px;">上传时间</th>
							</tr>
							<c:forEach items="${requestScope.play.filesInfo}" var="file">
								<tr>
									<td>
										<button onclick="downloadFile('${file.fileId}', '${file.upUser}')"
											 style="border:0px;background-color:transparent;">
											${file.fileId}
										</button>
									</td>
									<td>
									<button onclick="searchFilesOfUper('${file.upUser}')"
										 style="border:0px;background-color:transparent;">
											${file.upUser}
									</button>
									</td>
									<td>${file.size}&nbsp;kb</td>
									<td>${file.upTime}</td>
								</tr>
							</c:forEach>
						</table>
						<center>
							<table>
								<tr>
									<td>
										<a href="javascript:;" onclick="changePage('play','prior')">
											<div class="glyphicon glyphicon-backward" style="font-size:20px"></div>
										</a>
									</td>
									<td>
										&nbsp;第${play.time + 1}页&nbsp;/&nbsp;共${play.allPage}页&nbsp;
									</td>	
									<td>
										<a href="javascript:;" onclick="changePage('play','next')">
											<div class="glyphicon glyphicon-forward" style="font-size:20px"></div>
										</a>
									</td>
								</tr>
							</table>
						</center>
					</div>
					<div class="tab-pane fade" id="toIde">
						<table cellpadding="1px" style="margin: 0 auto;">
							<tr>
								<th style="width:600px;">文件名</th>
								<th style="width:250px;">上传者</th>
								<th style="width:150px;">大小</th>
								<th style="width:300px;">上传时间</th>
							</tr>
							<c:forEach items="${requestScope.ide.filesInfo}" var="file">
								<tr>
									<td>
										<button onclick="downloadFile('${file.fileId}', '${file.upUser}')"
											 style="border:0px;background-color:transparent;">
											${file.fileId}
										</button>
									</td>
									<td>
									<button onclick="searchFilesOfUper('${file.upUser}')"
										 style="border:0px;background-color:transparent;">
											${file.upUser}
									</button>
									</td>
									<td>${file.size}&nbsp;kb</td>
									<td>${file.upTime}</td>
								</tr>
							</c:forEach>
						</table>
						<center>
							<table>
								<tr>
									<td>
										<a href="javascript:;" onclick="changePage('ide','prior')">
											<div class="glyphicon glyphicon-backward" style="font-size:20px"></div>
										</a>
									</td>
									<td>
										&nbsp;第${ide.time + 1}页&nbsp;/&nbsp;共${ide.allPage}页&nbsp;
									</td>	
									<td>
										<a href="javascript:;" onclick="changePage('ide','next')">
											<div class="glyphicon glyphicon-forward" style="font-size:20px"></div>
										</a>
									</td>
								</tr>
							</table>
						</center>
					</div>
					<div class="tab-pane fade" id="toOffice">
						<table cellpadding="1px" style="margin: 0 auto;">
							<tr>
								<th style="width:600px;">文件名</th>
								<th style="width:250px;">上传者</th>
								<th style="width:150px;">大小</th>
								<th style="width:300px;">上传时间</th>
							</tr>
							<c:forEach items="${requestScope.office.filesInfo}" var="file">
								<tr>
									<td>
										<button onclick="downloadFile('${file.fileId}', '${file.upUser}')"
											 style="border:0px;background-color:transparent;">
											${file.fileId}
										</button>
									</td>
									<td>
										<button onclick="searchFilesOfUper('${file.upUser}')"
											 style="border:0px;background-color:transparent;">
												${file.upUser}
										</button>
									</td>
									<td>${file.size}&nbsp;kb</td>
									<td>${file.upTime}</td>
								</tr>
							</c:forEach>
						</table>
						<center>
							<table>
								<tr>
									<td>
										<a href="javascript:;" onclick="changePage('office','prior')">
											<div class="glyphicon glyphicon-backward" style="font-size:20px"></div>
										</a>
									</td>
									<td>
										&nbsp;第${office.time + 1}页&nbsp;/&nbsp;共${office.allPage}页&nbsp;
									</td>	
									<td>
										<a href="javascript:;" onclick="changePage('office','next')">
											<div class="glyphicon glyphicon-forward" style="font-size:20px"></div>
										</a>
									</td>
								</tr>
							</table>
						</center>
					</div>
					<div class="tab-pane fade" id="msgs">
						<c:forEach items="${requestScope.msgs}" var="eMsg">
							<div class="container">
								<div class="row">
									<div class="col-md-2" style="text-align: right;">${eMsg.userId }：</div>
									<div class="col-md-9" style="text-align: left;">${eMsg.msg }</div>
									<c:if test = "${sessionScope.user eq \"admin\"}">
										<div class="col-md-1">
											<button onclick = "deleteUserMsg('${eMsg.userId}','${eMsg.msg}',this)" 
												 style="border:0px;background-color:transparent;">
												<div class="glyphicon glyphicon-remove"></div>
											</button>
										</div>
									</c:if>
								</div>
								<div style="background-color: #e4e4e4; height: 2px; margin-left: 30px; margin-right: 30px; margin-top: 10px; margin-bottom: 10px;"></div>
							</div>
						</c:forEach>
					</div>
				</div>
			</div>
		</div>
				
		<!--底部效果-->
		<%@ include file="/WEB-INF/zpublicpages/footer.jsp"%>
	</body>
</html>